<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./js/lib.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./vendor/wangEditor-3.1.1/release/wangEditor.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/spark-md5.min.js"></script>
    <script type="text/javascript" src="./js/video.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">web 内容管理</a>
            <a href="">视频管理</a>
            <a>
                <cite>添加新闻</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>标题-简体
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="titleCn" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>标题-繁体
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="titleTw" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>标题-英文
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="titleEn" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-inline">
                    <select name="status" id="">
                        <option value="0">不发布</option>
                        <option value="1">发布</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">
                    视频地址MP4
                </label>
                <div class="layui-input-inline" style="width:60%">
                    <input type="text" name="video1" autocomplete="off" class="layui-input">
                </div>
                <a class="layui-btn" onclick="checkvideo('video1', 'mp4')">播放</a>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">
                    视频地址OGG
                </label>
                <div class="layui-input-inline" style="width:60%">
                    <input type="text" name="video2" autocomplete="off" class="layui-input">
                </div>
                <a class="layui-btn" onclick="checkvideo('video2', 'ogg')">播放</a>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">
                    视频地址webm
                </label>
                <div class="layui-input-inline" style="width:60%">
                    <input type="text" name="video3" autocomplete="off" class="layui-input">
                </div>
                <a class="layui-btn" onclick="checkvideo('video3', 'webm')">播放</a>
            </div>
            <div class="layui-form-item layui-form-text">
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>内容-简体</label>
                <div class="layui-input-block">
                    <div id="htmlCn" name="htmlCn"></div>
                </div>
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>内容-繁体</label>
                <div class="layui-input-block">
                    <div id="htmlTw" name="htmlTw"></div>
                </div>
                <label for="" class="layui-form-label">
                    <span class="x-red">*</span>内容-英文</label>
                <div class="layui-input-block">
                    <div id="htmlEn" name="htmlEn"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="newAdd" lay-submit>
                    确定新增
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>

    <script>
        var aId = Cookies.get('kplus-helmetAdminId');
        var aToken = Cookies.get('kplus-helmetAdminToken');
        layui.use(['form', 'layer', 'layedit'], function() {
            var layer = layui.layer,
                layedit = layui.layedit,
                form = layui.form;

            var WEditor = window.wangEditor,
                editorCn = new WEditor('#htmlCn'),
                editorTw = new WEditor('#htmlTw'),
                editorEn = new WEditor('#htmlEn');
            editorCn.create();
            editorTw.create();
            editorEn.create();

            form.on('submit(newAdd)', function(data) {
                    console.log(data)
                    console.log(editorCn.txt.html())
                    console.log(editorTw.txt.html())
                    console.log(editorEn.txt.html())
                    var newsData = {
                        'aId': aId,
                        'aToken': aToken,
                        'mp4': data.field.video1,
                        'ogg': data.field.video2,
                        'webm': data.field.video3,
                        'title': 'cn:' + data.field.titleCn + '|tw:' + data.field.titleTw + '|en:' +
                            data.field.titleEn,
                        'cn': editorCn.txt.html(),
                        'tw': editorTw.txt.html(),
                        'en': editorEn.txt.html(),
                        'status': data.field.status
                    }
                    addVideo(newsData)
                    return false;
                })
                // 新增视频
            function addVideo(data) {
                var loadIndex = layer.load(1, {
                    shade: [0.5, '#000']
                });
                $.ajax({
                    url: 'http://127.0.0.1:8080/api/v3/news',
                    type: 'put',
                    data: data,
                    async: false,
                    success: function(data) {
                        if (data.msg.code == 200) {
                            //console.log(data)
                            layer.close(loadIndex)
                            layer.msg(data.data.msg, {
                                time: 2000
                            });
                            window.parent.location.reload();
                            parent.layer.close(layer.index);
                        } else {
                            layer.msg(data.msg.msg, {
                                time: 4000
                            })
                            layer.close(loadIndex)
                        }
                    },
                    error: function(param) {
                        layer.close(loadIndex)
                        layer.msg('发生严重错误，请联系管理员修复！', {
                            time: 2000
                        });
                    }
                })
            }

        })

        //播放视频
        function checkvideo(index, type) {
            var src = $('input[name="' + index + '"]').val();
            layer.open({
                type: 1,
                anim: 2,
                title: '',
                shadeClose: true,
                skin: 'layui-layer-rim', //加上边框
                area: ['890px', '501px'], //宽高
                content: '<video style="display:block" controls preload="auto" width="890" height="500">' +
                    '<source src="' + src + '" type="video/' + type + '">' +
                    ' </video>'
            });
        }
    </script>
</body>

</html>